import React from "react"
import {getsong} from "./api"
import qs from 'query-string'
import './detailsong.css'

class Plays extends React.Component{
    constructor(){
        super()
        this.state={
            url:"",
            haha:""
        }
    }
    componentDidMount(){
        //console.log(this.props)
        let id = qs.parse(this.props.location.search).id
        console.log(id)
        getsong(id)
        .then(res=>{
            console.log(res)
            this.setState({
                url:res.data[0].url,
            })
        })
    }
    fan(){
        this.props.history.go(-1)
    }
    zhuan(){
        this.setState({
            haha:"running"
        })
    }
    ting(){
        this.setState({
            haha:""
        })
    }
    render(){
        return(
            <div id="songs">
                <h4 onClick={this.fan.bind(this)}>
                <img src={require('../../imgs/back.png')} style={{width:"20px",height:"20px"}}/>
                    <span>返回</span></h4>
                <img src={require('../../imgs/唱片.jpg')} className={this.state.haha}/><br/>
                <audio src={this.state.url} controls onPlay={this.zhuan.bind(this)
                } onPause={this.ting.bind(this)}></audio>
            </div>
        )
    }
}

export default Plays